import '../assets/css/tree.css'

import {
  Tree
} from 'antd'
const { TreeNode } = Tree;
export default function Comp() {
  let treeData = [
    {
      title: '项目',
      key: '1',
      children: [
        {
          title: '人员管理',
          key: '1-1',
          isLeaf: true
        }
      ]
    },
    {
      title: '客户',
      key: '2',
      children: [
        {
          title: '客户管理',
          key: '2-1',
          isLeaf: true,
          children: [
            {
              title: '新建',
              key: '2-1-1',
              isLeaf: true
            },
            {
              title: '编辑',
              key: '2-1-2',
              isLeaf: true
            },
            {
              title: '查看',
              key: '2-1-3',
              isLeaf: true
            },
            {
              title: '删除',
              key: '2-1-4',
              isLeaf: true
            }
          ]
        }
      ]

    },
    {
      title: '资产',
      key: '3',
      children: [
        {
          title: '楼宇',
          key: '3-1',
          isLeaf: true,
          children: [
            {
              title: '新建',
              key: '3-1-1',
              isLeaf: true
            },
            {
              title: '编辑',
              key: '3-1-2',
              isLeaf: true
            },
            {
              title: '查看',
              key: '3-1-3',
              isLeaf: true
            },
            {
              title: '删除',
              key: '3-1-4',
              isLeaf: true
            }
          ]
        },
        {
          title: '空间',
          key: '3-2',
          isLeaf: true,
          children: [
            {
              title: '新建',
              key: '3-2-1',
              isLeaf: true
            },
            {
              title: '编辑',
              key: '3-2-2',
              isLeaf: true
            },
            {
              title: '查看',
              key: '3-2-3',
              isLeaf: true
            },
            {
              title: '删除',
              key: '3-2-4',
              isLeaf: true
            },
            {
              title: '上架',
              key: '3-2-5',
              isLeaf: true
            },
            {
              title: '下架',
              key: '3-2-6',
              isLeaf: true
            }
          ]
        }
      ]
    }
  ];
  const renderTreeNodes = (data) =>
    data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} key={item.key} className='leaf-node' />;
    });
  return (
    <>

      {/* <Tree
        blockNode={true}
        checkable
        treeData={treeData}
        multiple={true}
        defaultCheckedKeys={['1','2-1']}
        >

{(treeNodes) =>{
    console.log( treeNodes,111 );
    
    return  treeNodes.map((node) => (
        <Tree.TreeNode key={node.key} title={node.title}>
          {node.children && node.children.length > 0? (
            <Tree treeData={node.children} />
          ) : null}
        </Tree.TreeNode>
      ))
    }
    }
        </Tree> */}
      <Tree
        multiple={true}
        checkable
      >{renderTreeNodes(treeData)}</Tree>

    </>
  )
}
